<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			#main{
				display: flex;
			}

			canvas {
				border: solid 1px cadetblue;
				margin: 10px;
				margin-right: 20px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<canvas id="canvas" width="600" height="500"></canvas>
			<video width="600" height="400" src="img/sp.mp4" controls="controls">
				当前浏览器不支持 video直接播放，点击这里下载视频: <a href="myvideo.webm">下载视频</a>
			</video>
		</div>
		<script type="text/javascript">
			/* 方法获取HTML <canvas> 元素的引用并获取这个元素的context——图像稍后将在此被渲染 */
			const ctx = document.getElementById('canvas').getContext('2d');
			const video =document.querySelector('video');
			/* 绘制视频 */
			let interId;
			video.onplay=function(){
				interId = setInterval(()=>{
					ctx.clearRect(0,0,600,500);
					ctx.fillRect(0,0,600,500)
					ctx.drawImage(video,0,20,600,500)
					ctx.font = "20px 黑体";
					ctx.strokeStyle="aliceblue"
					ctx.strokeText('真棒',10 ,30)
				},32)
			}
			
			video.onpause=function(){
				clearInterval(interId)
			}
			
		</script>
	</body>
</html>
